import React from './react';
import ReactDom from './react-dom';
const ThemeContext = React.createContext(null);

const FuncComponent = (props) => {
  return (
    <ThemeContext.Consumer>
      {(context) => (
        <div>
          <p>func component</p>
          context color: {context.color}
        </div>
      )}
    </ThemeContext.Consumer>
  );
};
class ClassComp extends React.Component {
  state = {
    color: 'green',
  };
  changeColor = (color) => {
    this.setState({
      color,
    });
  };
  render() {
    const contextValue = {
      color: this.state.color,
      changeColor: this.changeColor,
    };
    return (
      <ThemeContext.Provider value={contextValue}>
        <div
          id="container"
          style={{
            margin: '10px',
            padding: '10px',
            border: `2px solid ${this.state.color}`,
          }}
        >
          <ClassComp2 />
          <ClassComp3 />
          <FuncComponent/>
        </div>
      </ThemeContext.Provider>
    );
  }
}

class ClassComp2 extends React.Component {
  static contextType = ThemeContext;
  render() {
    return (
      <div
        style={{
          margin: '10px',
          padding: '10px',
          border: `2px solid ${this.context.color}`,
        }}
      ></div>
    );
  }
}
class ClassComp3 extends React.Component {
  static contextType = ThemeContext;
  render() {
    return (
      <div
        style={{
          margin: '10px',
          padding: '10px',
          border: `2px solid ${this.context.color}`,
        }}
      >
        <button onClick={() => this.context.changeColor('red')}>变红</button>
        <button onClick={() => this.context.changeColor('green')}>变绿</button>
      </div>
    );
  }
}

ReactDom.render(<ClassComp />, document.getElementById('root2'));
